<template>
<view class="">
	<view class="header_background">
		<image src="../../static/images/bl.png" mode=""></image>
	</view>
	<view class="userMessage">
		<view class="common_block">
			<view style="padding: 50upx 30upx;">
				<view class="flex_layout">
					<view class="left_img">
						<image :src="user.avatar?user.avatar:'../../static/images/user.png'" mode=""></image>
						<view class="sexImg">
							<image src="../../static/images/sex1.png" mode=""></image>
						</view>
					</view>
					<view class="right_text">
						<view class="">{{user.nickname?user.nickname:'未登录'}}</view>
						<text>{{user.bio?user.bio:'这个人很懒，什么也没写'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
		<view class="common_block"  v-if="isClinicListsShow">
			<view class="appointment_item">
				<view class="appointment_title flex_layout">
					<view class="left_title">有效期：{{myCouponDetails.begintime}}至{{myCouponDetails.endtime}}</view>
					<view class="use" v-if="myCouponDetails.statusdata==0">未预约</view>
				</view>
				<view class="appointment_content">
					<view class="appointment_top">
						<view class="content_title">{{myCouponDetails.coupon_category_id.nametext}}</view>
						<view class="appointment_info">
							<view  v-html="myCouponDetails.coupon_category_id.descriptioncontent"></view>
							
						</view>
					</view>
          <view class="moneyNum">￥{{myCouponDetails.coupon_category_id.pricenumber}}</view>
				</view>
			</view>
		</view>
		
		<view class="common_block">
			<view class="nearby_store">附近门店</view>
			<view class="nearby_content_padding">
				<view class="nearby_item flex_layout" v-for="(item2, index2) in clinicListsNear" :key="index2">
					<view class="left_nearby"><image :src="item2.logoavatar" mode="aspectFill"></image></view>
					<view class="right_nearby">
						<view class="nearby_tittle">{{item2.name}}</view>
						<view class="content_message">
							<image src="../../static/images/distance.png" mode=""></image>
							<text>{{item2.distance}}KM</text>
						</view>
						<view class="content_message">
							<image src="../../static/images/address.png" mode=""></image>
							<text>{{item2.addresstext}}</text>
						</view>
						<view class="flex_layout number_btn">
							<view class="content_message message_margin">
								<image src="../../static/images/phone.png" mode=""></image>
								<text>{{item2.phonetext}}</text>
							</view>
							<view class="employBtn">
								<button @click="employ" :data-name="item2.name" :data-id="item2.id">去预约</button>
							</view>
						</view>
					</view>
				</view>
 
			</view>
		</view>
	<!--选择省市区-->
	<view class="select_border">
		<view class="select_layout">
			<view class="select_title">全国可使用门店{{clinicListsCount}}家</view>
			<view class="select_reset" @click="showAll">显示全部</view>
		</view>
		<view class="select-box">
			<view class="select-item">
				<view class="select-list" @tap="tabEvent(index)" :class="indexTab == index ? 'selected' : ''" v-for="(item, index) in selectList" :key="index">
					{{item.txt}} <image src="../../static/images/bottom.png" mode=""></image>
				</view>
			</view>
			<view class="select-item-box" v-if="addressList">
				<!-- 省 -->
				<view class="province-box" v-show="proviceShow">
					<view class="select-list-cont" @tap="provinceEvent(item,index)" v-for="(item,index) in provinceData" :key="item.code">
						{{item.name}}<span class="check" v-show="index == checkOne">√</span>
					</view>
				</view>
				<!-- 市 -->
				<view class="city-box" v-show="cityShow">
					<view class="select-list-cont" @tap="cityEvent(item,index)" v-for="(item,index) in cityData" :key="item.code">
						{{item.name}}<span class="check" v-show="index==checkTwo">√</span>
					</view>
				</view>
				<!-- 区 -->
				<view class="area-box" v-show="areaShow">
					<view class="select-list-cont" @tap="areaEvent(item,index)" v-for="(item,index) in areaData" :key="item.code">
						{{item.name}}<span class="check" v-show="index==checkThree">√</span>
					</view>
				</view>
			</view>
		</view>
		
		<view class="nearby_content_padding" style="position: relative;">
			<view class="zzc" v-if="addressList"></view>
			<view class="nearby_content" v-if="isClinicListsShow">
				<block v-if="clinicLists.length>0">
				<view class="nearby_item flex_layout" v-for="(item, index) in clinicLists" :key="index">
					<view class="left_nearby"><image :src="item.logoavatar" mode="aspectFill"></image></view>
					<view class="right_nearby">
						<view class="nearby_tittle">{{item.name}}</view>
						<view class="content_message">
							<image src="../../static/images/address.png" mode=""></image>
							<text>{{item.addresstext}}</text>
						</view>
						<view class="flex_layout number_btn">
							<view class="content_message message_margin">
								<image src="../../static/images/phone.png" mode=""></image>
								<text>{{item.phonetext}}</text>
							</view>
							<view class="employBtn">
								<button @click="employ" :data-name="item.name" :data-id="item.id">去预约</button>
							</view>
						</view>
					</view>
				</view>
				</block>
				<block v-else>
					<view class="common_block nonebg">
						<view class="appointment_item">
							<view class="noResult">暂无门店信息</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</view>
</template>
 
<script>
var _this;
var page=1,reachbottom = false;
import cityDatas from '../../common/city.area.js'
export default {
	data() {
		return {
			provinceData: cityDatas,
			cityData: [],
			areaData: [],
			selectList: [{
					txt: '请选择省'
			}, {
					txt: '请选择市'
			}, {
					txt: '请选择区'
			}],
			tabOne: '请选择',
			indexTab: 0,
			proviceShow: true,
			areaShow: false,
			cityShow: false,
			show: false,
			type: '',
			checkOne: null,
			checkTwo: null,
			checkThree: null,
			addressList:false,
			user:this.$common.userInfo(),
			myCouponDetails:{
							 appointmenttime:'',
							 begintime:'',
							 qrcodeimage:'',
							 number:'',
							 coupon_category_id:{
								nametext:'',
								endtime:'',
								descriptioncontent:'',
								pricenumber:'',
								 
							 },
							 clinic_detail:{
								name:'',
								addresstext:'',
								phonetext:'', 
							 } 
			},
			longitude:'',
			latitude:'',
			clinicListsNear:[],
			clinicLists:[],
			isClinicListsShow:false,
			province:'',
			city:'',
			area:'', 
			limit:10,
			//number:0,//每页门店的列表数量
			clinicListsCount:''
		}
	},
	onLoad(options) {
		page=1
		reachbottom=false;
		this.clinicLists=[];
		var that=this;
		if(options.id){
			this.id=options.id;
			that.getMyCouponDetails();
		}else{
			this.$common.errorToShow('参数错误',function(){
				that.$common.navigateBack();
			})
		}
		//获取定位
		this.getLocation();
		
	},
	onShow(){
		this.user = this.$common.userInfo();
		if (this.user) {
			if(!this.user.mobile){
				this.$common.navigateTo('/pages/user/bind');
			}else{
				this.$common.refreshUser(res => {
					if(this.user.avatar.indexOf("data:") != -1){
						var cavatar='/images/user.png';
						this.user.avatar=cavatar;
					}
				})
			}
			
		}else{
			this.$common.toLogin();
		}
	},
	mounted() {
		_this= this;
	},
	// 加载更多
	onReachBottom: function() {
		if (!reachbottom) {
			this.getClinicLists();
		}
	},
	methods: {
		//判断是否授权打开定位
		isLocation:function(){
			uni.authorize({
			    scope: 'scope.userLocation',
			    success() {
			        uni.getLocation()
			    }
			})
		},
		getLocation:function(){
			var that=this;
			uni.getLocation({
			    type: 'gcj02',
			    success: function (res) {
					that.longitude = res.longitude;
					that.latitude = res.latitude;
					console.log("res: ",res);
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
					that.getClinicLists();
			    },
				error:function(res){
					that.isLocation();
					console.log("res: ",res);
				}
			});
		},
		//获取优惠券具体数据
		getMyCouponDetails:function(){
			var that=this;
			var id=that.id;
			this.$api.getCouponDetails(
			    {id:that.id,},
				res => {
					if (res.code == 1) {
						that.myCouponDetails=res.data
					}
					if (res.code == 0) {
						that.$common.errorToShow(res.msg,function(){
							that.$common.navigateBack();
						})
					}
				}
			)
		},
		//获取附近门店和门店列表
		getClinicLists:function(){
			var that=this;
			var id=that.id;
			this.$common.loadToShow()
			this.$api.getClinicLists(
			     {id:id,
				  latitude:that.latitude,
				  longitude:that.longitude,
				  province:that.province,
				  city:that.city,
				  area:that.area,
				  page:page,
				  limit:that.limit
				  },
				res => {
					this.$common.loadToHide();
					if (res.code == 1) {
						//是否显示列表门店数据
						that.isClinicListsShow=true;
						//附近门店排序数据
						that.clinicListsNear=res.data.near;
						that.clinicListsCount=res.data.total;
						//省市区排序数据
						//that.ClinicLists=res.data.lists;
						var pageClinicLists = res.data.lists;
						var number=res.data.lists.length; 
						page++;
						uni.stopPullDownRefresh();
						if (number == 0) {
							reachbottom = true
							uni.showToast({
								"title": "已经加载全部",
								icon: "none",
								duration: 1000
							});
						} else {
							console.log(pageClinicLists);
							that.clinicLists = that.clinicLists.concat(pageClinicLists);
						}
					}
					if (res.code == 0) {
						that.$common.errorToShow(res.msg,function(){
							//that.$common.navigateBack();
						})
					}
				}
			)
		},
		showAll:function(){
			this.selectList[0].txt = "请选择省"
			this.selectList[1].txt = "请选择市"
			this.selectList[2].txt = "请选择区"
			this.proviceShow = true
			this.cityShow = false
			this.areaShow = false
			this.checkOne = null
			this.checkTwo = null
			this.checkThree = null
			this.addressList=false
			page=1;
			// this.provinceData = []
			// this.cityData = []
			// this.areaData = []
			this.province=''
			this.city=''
			this.area=''
			this.clinicLists=[];
			this.getClinicLists();
		},
		employ: function(e){
			//门店id
			var clinic_id=e.currentTarget.dataset.id;
			//门店名称
			var name=e.currentTarget.dataset.name;
			//套餐名称
			var nametext=this.myCouponDetails.coupon_category_id.nametext;
			//优惠券id
			var coupon_id=this.myCouponDetails.id
			
			//有效期（开始时间）
			var begintime=this.myCouponDetails.begintime
			//有效期（结束时间）
			var endtime=this.myCouponDetails.endtime
			
			uni.navigateTo({
				url:'yuyue?clinic_id='+clinic_id+'&nametext='+nametext+'&coupon_id='+coupon_id+'&name='+name+'&type=1'+'&yuyueType=1'
			})
		},
		togglePopup(type, open) {
			this.type = type
			if (open === 'tip') {
					this.show = true
			} else {
					this.$refs[open].open()
			}
		},
		cancel(type) {
			if (type === 'tip') {
					this.show = false
					return
			}
			this.$refs[type].close()
		},
		change(e) {
			if (e.show == true) {
					uni.hideTabBar()
			} else {
					uni.showTabBar()
			}
		},
		tabEvent(index) {
			this.indexTab = index
			if (this.indexTab == 0) {
				if(this.addressList){
					this.addressList=false
				}else{
					this.addressList=true
				}
				this.proviceShow = true
				this.cityShow = false
				this.areaShow = false
				// this.checkOne = null
				this.checkTwo = null
				this.checkThree = null
				// this.cityData = []
				this.areaData = []
				// this.selectList[0].txt = "请选择"
				this.selectList[1].txt = "请选择市"
				this.selectList[2].txt = "请选择区"
			} else if (this.indexTab == 1) {
				if(this.selectList[0].txt == "请选择省"){
					uni.showToast({
						title: '请先选择省',
						duration: 2000,
						icon:'none'
					})
					this.addressList=false
				}else{
					if(this.addressList){
						this.addressList=false
					}else{
						this.addressList=true
					}
				}
				
				this.proviceShow = false
				this.cityShow = true
				this.areaShow = false
				// this.checkTwo = null
				this.checkThree = null
				// this.areaData = []
				// this.selectList[1].txt = "请选择"
				this.selectList[2].txt = "请选择区"
			} else if (this.indexTab == 2) {
				
				if(this.selectList[1].txt == "请选择市"){
					uni.showToast({
						title: '请先选择市',
						duration: 2000,
						icon:'none'
					})
					this.addressList=false
				}else{
				if(this.addressList){
					this.addressList=false
				}else{
					this.addressList=true
				}
				}
				this.proviceShow = false
				this.cityShow = false
				this.areaShow = true
			}
		},
		provinceEvent(data, index) {
			page=1;
			this.clinicLists=[];
			console.log("data: ",data);
			this.checkOne = index
			this.selectList[0].txt = data.name
			//省
			this.province=data.name
			this.indexTab = 1
			this.proviceShow = false
			this.cityShow = true
			this.areaShow = false
			this.cityData = data.cityList
			this.getClinicLists();
		},
		cityEvent(data, index) {
			page=1;
			this.clinicLists=[];
			console.log("data: ",data);
			this.checkTwo = index
			this.selectList[1].txt = data.name
			//市
			this.city=data.name
			this.indexTab = 2
			this.proviceShow = false
			this.cityShow = false
			this.areaShow = true
			this.areaData = data.areaList
			this.getClinicLists();
		},
		areaEvent(data, index) {
			page=1;
			this.clinicLists=[];
			console.log("data: ",data);
			this.checkThree = index
			this.selectList[2].txt = data.name
			//区
			this.area=data.name
			this.addressList=false
			this.getClinicLists();
		}
	}
}
</script>
 
<style>
	@import url('../../common/common.css');
	page{background: #f8f8f8;}
	.flex_layout{display: flex; align-items: center; flex-wrap: wrap;}
	.header_background{position: relative; width: 100%; height: 220upx; background: #2562a1; z-index: -1;}
	.header_background image{position: absolute; display: block; left: 0; bottom: 0; height: 70upx; width: 100%;}
	.userMessage{width: 690upx; margin: -160upx auto 0;}
	.common_block{background: #fff; border-radius: 10px; margin-bottom: 20upx;}
	.left_img{position: relative; width: 114upx; height: 114upx;}
	.left_img>image{display: block; width: 114upx; height: 114upx; border-radius: 50%;}
	.sexImg{position: absolute; bottom: 10upx; right: 0; height: 30upx; width: 48upx; border-radius: 30upx; background: #2562a1; display: flex; align-items: center; justify-content: center;}
	.sexImg image{display: block; width: 20upx; height: 21upx;}
	.right_text{padding-left: 30upx;}
	.right_text view{color: #333333; font-size: 30upx;}
	.right_text text{color: #999; font-size: 24upx; margin-top: 20upx; display: block;}
	.operate_btn{background: #e8f3ff; justify-content: space-between; height: 60upx; margin-top: 30upx; margin-bottom: 10upx;}
	.erect_position{height: 36upx; width: 1px; background: #2562a1;}
	.edit_code{width: 49%; display: flex; align-items: center; justify-content: center;}
	.edit_code image{width: 30upx; height: 30upx; margin-right: 20upx;}
	.edit_code text{color: #2562a1; font-size: 24upx;}
	.manageData_title{border-bottom: 1px solid #f2f2f2; padding: 30upx 20upx; justify-content: space-between;}
	.manageData_title text{color: #333; font-size: 30upx;}
	.manageData_title view{color: #999999; font-size: 24upx; display: flex; align-items: center;}
	.manageData_title view image{width: 13upx; height: 23upx; margin-left: 20upx;}
	.manageData_list{padding: 0 30upx; justify-content: space-between;}
	.manageData_text{padding: 30upx;}
	.manageData_text view{text-align: center; color: #333; font-size: 30upx;}
	.manageData_text text{display: block; text-align: center; font-size: 24upx; color: #666; margin-top: 10upx;}
	.menu_item{padding: 50upx 30upx; border-bottom: 1px solid #f8f8f8; display: flex; align-items: center; color: #333; font-size: 30upx;}
	.menu_item image{width: 36upx; height: 36upx; display: block; margin-right: 30upx;}
	.menu_item:last-child{border-bottom: none;}
	
	.appointment_item{background: #fff; border-radius: 10px; border-bottom: 20upx solid #f8f8f8;}
	.appointment_item:last-child{border: none}
	.appointment_title{justify-content: space-between; padding: 20upx 30upx; border-bottom: 1px solid #f8f8f8;}
	.appointment_title view.use{color: #999; font-size: 24upx; display: flex; align-items: center; justify-content: center; width: 90upx; height: 45upx; border-radius: 10px 0 10px 0; background: #f7f7f7;}
	.left_title{color: #999; font-size: 24upx;}
	.right_title{color: #999; font-size: 24upx;}
	.right_title text{display: inline-block; margin-right: 10upx;}
	.right_title text.yi{border: 2upx solid #1a67b8; width: 10upx; height: 10upx; border-radius: 10upx;}
	.right_title text.dai{background: #1a67b8; width: 14upx; height: 14upx; border-radius: 14upx;}
	.appointment_content{padding: 40upx 30upx;}
	.content_title{color: #333; font-size: 36upx; font-weight: bolder;}
	.content_message{margin-top: 20upx; white-space: nowrap; text-overflow: ellipsis;}
	.content_message image{width: 24upx; height: 24upx;}
	.content_message text{color: #666; font-size: 24upx; margin-left: 20upx;}
	.content_message_flex{justify-content: space-between;}
	.moneyNum{color: #f44141; font-size: 36upx;}
	.appointment_top{padding-bottom: 30upx;}
	.employ{justify-content: space-between; padding-top: 30upx; border-top: 1px solid #f8f8f8;}
	.store_text{padding: 20upx 30upx; background: #e8f3ff; border-radius: 5px; margin-top: 20upx;}
	.store_text text{color: #2562a1; font-size: 24upx; display: block; padding: 10upx 0;}
	.employBtn button{color: #fefefe; font-size: 24upx; width: 120upx; height: 40upx; border-radius: 40upx; background: #2562a1; padding: 0; line-height: 40upx; margin: 0;}
  .nearby_item{padding: 30upx; border-bottom: 1px solid #f8f8f8;}
	.nearby_item:last-child{border: none;}
	.left_nearby{width: 150upx;}
	.left_nearby image{width: 150upx; height: 150upx; display: block;}
	.right_nearby{padding-left: 30upx; width: 480upx;}
	.nearby_tittle{color: #333; font-size: 30upx;}
	.nearby_tittle text{display: inline-block; color: #2562a1; font-size: 24upx; margin-left: 10upx;}
	.number_btn{justify-content: space-between; margin-top: 20upx;}
	.message_margin{margin: 0;}
	.nearby_store{padding: 30upx; color: #333; font-size: 30upx; border-bottom: 1px solid #f8f8f8;}
	.select_title{color: #333; font-size: 36upx; padding: 30upx; border-bottom: 1px solid #f8f8f8; background: #fff;}
	.header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 35upx;
	}

	.title {
			font-size: 34upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
	}

	.cancel-icon {
			font-size: 34upx;
			color: rgba(153, 153, 153, 1);
	}

	.check {
			padding-left: 17upx;
			color: #FF7E28;
	}

	.select-box {position: relative; background: #fff;}

	.select-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30upx;
			border-bottom: 1px solid #F6F6F6;
	}

	.select-list {
			font-size: 30upx;
			color: #333;
			display: flex;
			align-items: center;
	}
	.select-list image{width: 20upx; height: 13upx; margin-left: 15upx;}
	.select-item-box{position: absolute; top: 99upx; left: 0; width: 100%; max-height: 500upx; padding-bottom: 30upx; overflow: auto; background: #fff; z-index: 100;}
	.select-list-cont {
			padding-left: 67upx;
			font-size: 30upx;
			font-weight: 500;
			color: #333;
			line-height: 40px;
	}
	.zzc{position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 99; background: rgba(0,0,0,0.5);}

	.selected {
			/* border-bottom: 1px solid #F0AD4E;
			color: rgba(255, 133, 0, 1); */
	}
	.select_border{margin-top: 20upx;}
	.nearby_content_padding{padding: 20upx 30upx; background: #f8f8f8;}
	.nearby_content_padding .nearby_content{border-radius: 10px; overflow: hidden;}
	.nearby_content_padding .nearby_item{background: #fff;}
	.appointment_info{ background: #e8f3ff; padding: 30upx; line-height: 1.5; color: #2562a1; font-size: 24upx; margin-top:  20upx;}
	.select_layout{display: flex; align-items:auto; justify-content: space-between; flex-wrap: wrap; background: #fff; border-bottom: 1px solid #f8f8f8; }
	.select_reset{ color: #1a67b8; padding: 30upx;}
	
	.common_block{background: #fff; border-radius: 10px; margin-bottom: 20upx;}
	.nonebg{background: none !important;}
	.noResult{background: #fff; padding: 30upx; font-size: 30upx; color: #999; text-align: center; border-radius: 5px;}
</style>